  <template>
  <div class="content">
    <div class="leftBox">
      <Earth />
    </div>
    <div class="rightBox">
      <!-- <div class="topBox">
        <div class="tip">实时降雨监测</div>
      </div> -->

      <div class="centerBox">
        <div class="tip">断面信息</div>
        <el-row :gutter="20">
          <el-col :span="6" :xs="24">
            <div class="head-container">
              <div class="top">
                <el-switch
                  v-model="value1"
                  active-text="行政区域"
                  inactive-text="类型筛选"
                >
                </el-switch>
              </div>
              <div class="center">
                <div class="treeBox" v-if="value1">
                  <el-tree
                    :data="deptOptions"
                    :props="defaultProps"
                    :default-expand-all="true"
                  />
                </div>
                <div class="stateBox" v-else-if="value1 != true">
                  <el-checkbox v-model="checked">正常</el-checkbox>
                  <el-checkbox v-model="checked">超汛限</el-checkbox>
                  <el-checkbox v-model="checked">水库</el-checkbox>
                  <el-checkbox v-model="checked">河道</el-checkbox>
                  <el-checkbox v-model="checked">水闸</el-checkbox>
                  <el-checkbox v-model="checked">拦河坝</el-checkbox>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="18" :xs="24">
            <el-table :data="tableList" :height="300" class="tableStyle">
              <el-table-column
                fixed
                type="index"
                :index="indexMethod"
                label="序号"
              ></el-table-column>
              <el-table-column
                label="断面名称"
                align="center"
                prop="phonenumber"
              />
              <el-table-column
                label="所属流域"
                align="center"
                prop="phonenumber"
              />
              <el-table-column
                label="预报最大水位(m)"
                align="center"
                prop="phonenumber"
              />
              <el-table-column
                label="预报峰现时间"
                align="center"
                prop="phonenumber"
              />
              <el-table-column
                label="预警水位(m)"
                align="center"
                prop="phonenumber"
              />
              <el-table-column
                label="实时降雨"
                align="center"
                prop="phonenumber"
              />
              <el-table-column
                label="实时水位"
                align="center"
                prop="phonenumber"
              />
              <el-table-column
                label="是否超预警"
                align="center"
                prop="phonenumber"
              />
              <el-table-column fixed="right" label="操作" width="120">
                <template slot-scope="scope">
                  <el-button
                    @click.native.prevent="detailRow(scope.$index, tableData)"
                    type="text"
                    size="small"
                  >
                    详情
                  </el-button>
                </template>
              </el-table-column>
            </el-table>

            <pagination
              v-show="total > 0"
              :total="total"
              :page.sync="queryParams.pageNum"
              :limit.sync="queryParams.pageSize"
              @pagination="getList"
            />
          </el-col>
        </el-row>
      </div>
      <div class="bottomBox">
        <div class="tip">断面报表</div>
        <el-form
          ref="form"
          :model="form"
          label-width="70px"
          class="specialEffects"
        >
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="开始日期" prop="startTime">
                <el-date-picker
                  type="datetime"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  placeholder="请选择时间"
                  v-model="form.startTime"
                  style="width: 100%"
                  :picker-options="startDatePickerOptions"
                  @change="handleStartDateChange"
                ></el-date-picker>
              </el-form-item> </el-col
            ><el-col :span="8">
              <el-form-item label="结束日期" prop="endTime">
                <el-date-picker
                  type="datetime"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  placeholder="请选择时间"
                  v-model="form.endTime"
                  style="width: 100%"
                  :picker-options="endDatePickerOptions"
                  @change="handleEndDateChange"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="1.5">
              <el-button
                type="primary"
                plain
                icon="el-icon-serch"
                @click="handleAdd"
                >查询</el-button
              >
            </el-col>
          </el-row>
        </el-form>
        <el-table :data="tableList" :height="270" class="tableStyle">
          <el-table-column
            fixed
            type="index"
            :index="indexMethod"
            label="序号"
          ></el-table-column>
          <el-table-column label="降雨时间" align="center" prop="phonenumber" />
          <el-table-column
            label="简报发布次数"
            align="center"
            prop="phonenumber"
          />
          <el-table-column
            label="断面预报超警个数"
            align="center"
            prop="phonenumber"
          />
          <el-table-column
            label="断面实测超警个数"
            align="center"
            prop="phonenumber"
          />
          <el-table-column
            label="断面超警命中个数"
            align="center"
            prop="phonenumber"
          />

          <el-table-column fixed="right" label="操作" width="120">
            <template slot-scope="scope">
              <el-button
                @click.native.prevent="detailRow(scope.$index, tableData)"
                type="text"
                size="small"
              >
                预报信息
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <el-dialog
      title="断面详情"
      :visible.sync="detailDialogVisible"
      width="80%"
      :modal-append-to-body="false"
    >
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>实时信息</span>
        </div>
        <el-descriptions
          :column="10"
          border
          :contentStyle="CS"
          :label-style="LS"
          direction="vertical"
        >
          <el-descriptions-item label="实时降雨">
            {{ this.value2 }}
          </el-descriptions-item>
          <el-descriptions-item label="实时水位">
            {{ this.value2 }}</el-descriptions-item
          >
        </el-descriptions>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>基本信息</span>
        </div>
        <el-descriptions
          :column="10"
          border
          :contentStyle="CS"
          :label-style="LS"
          direction="vertical"
        >
          <el-descriptions-item label="断面汇水面积">
            {{ this.value2 }}
          </el-descriptions-item>
          <el-descriptions-item label="断面位置坐标">
            {{ this.value2 }}</el-descriptions-item
          >
          <el-descriptions-item label="所属行政区">
            {{ this.value2 }}
          </el-descriptions-item>
          <el-descriptions-item label="所属流域">
            {{ this.value2 }}
          </el-descriptions-item>
          <el-descriptions-item label="警戒水位">
            {{ this.value2 }}
          </el-descriptions-item>
          <el-descriptions-item label="汛限水位">
            {{ this.value2 }}
          </el-descriptions-item>
          <el-descriptions-item label="历史最大水位">
            {{ this.value2 }}
          </el-descriptions-item>
          <el-descriptions-item label="断面汇水范围雨量站点信息">
            {{ this.value2 }}
          </el-descriptions-item>
        </el-descriptions>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>预报信息</span>
        </div>
        <el-descriptions
          :column="10"
          border
          :contentStyle="CS"
          :label-style="LS"
          direction="vertical"
        >
          <el-descriptions-item label="未来24h预报水位及流量过程">
            {{ this.value2 }}
          </el-descriptions-item>
          <el-descriptions-item label="未来24h预报水位流量极值">
            {{ this.value2 }}</el-descriptions-item
          >
          <el-descriptions-item label="未来24h预报水位流量极值出现时间">
            {{ this.value2 }}
          </el-descriptions-item>
          <el-descriptions-item label="未来24hh预报降雨过程">
            {{ this.value2 }}
          </el-descriptions-item>
          <el-descriptions-item label="模型类型">
            {{ this.value2 }}
          </el-descriptions-item>
          <el-descriptions-item label="模型入参">
            {{ this.value2 }}
          </el-descriptions-item>
          <el-descriptions-item label="模型出参">
            {{ this.value2 }}
          </el-descriptions-item>
        </el-descriptions>
      </el-card>
    </el-dialog>
  </div>
</template>

  <script>
import Earth from "./earth.vue";
import Echart1 from "./echart1.vue";
export default {
  components: { Earth, Echart1 },
  data() {
    return {
      form: {},
      //选择时间校验
      startDatePickerOptions: {
        disabledDate: (time) => {
          if (this.form.endTime) {
            return time.getTime() > new Date(this.form.endTime).getTime();
          } else {
            return false;
          }
        },
      },
      endDatePickerOptions: {
        disabledDate: (time) => {
          if (this.form.startTime) {
            return time.getTime() < new Date(this.form.startTime).getTime();
          } else {
            return false;
          }
        },
      },
      CS: {
        "text-align": "center", //文本居中
        "min-width": "80px", //最小宽度
        "word-break": "break-all", //过长时自动换行
      },
      LS: {
        "text-align": "center",
        "font-weight": "600",
        "min-width": "80px",
        "word-break": "keep-all",
      },
      detailDialogVisible: false,
      queryParams: {},
      total: 10,
      value1: false,
      value2: "test",
      echartData: {
        x: ["白云区", "增城区", "天河区", "珠海区"],
        A: [1, 2, 3, 4],
        B: [10, 20, 33, 40],
        C: [4, 3, 2, 1],
      },
      tableData: [
        {
          tm: "2023-11-09",
          addrss: "白云区",
          real: 5,
          earlyWarning: 10,
        },
        {
          tm: "2023-11-09",
          addrss: "白云区",
          real: 5,
          earlyWarning: 10,
        },
        {
          tm: "2023-11-09",
          addrss: "白云区",
          real: 5,
          earlyWarning: 10,
        },
        {
          tm: "2023-11-09",
          addrss: "白云区",
          real: 5,
          earlyWarning: 10,
        },
        {
          tm: "2023-11-09",
          addrss: "增城区",
          real: 5,
          earlyWarning: 10,
        },
        {
          tm: "2023-11-09",
          addrss: "天河区",
          real: 5,
          earlyWarning: 10,
        },
        {
          tm: "2023-11-09",
          addrss: "珠海区",
          real: 5,
          earlyWarning: 10,
        },
      ],
      deptOptions: [
        {
          label: "一级 1",
          children: [
            {
              label: "二级 1-1",
              children: [
                {
                  label: "三级 1-1-1",
                },
              ],
            },
          ],
        },
        {
          label: "一级 2",
          children: [
            {
              label: "二级 2-1",
              children: [
                {
                  label: "三级 2-1-1",
                },
              ],
            },
            {
              label: "二级 2-2",
              children: [
                {
                  label: "三级 2-2-1",
                },
              ],
            },
          ],
        },
        {
          label: "一级 3",
          children: [
            {
              label: "二级 3-1",
              children: [
                {
                  label: "三级 3-1-1",
                },
              ],
            },
            {
              label: "二级 3-2",
              children: [
                {
                  label: "三级 3-2-1",
                },
              ],
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
      tableList: [
        { phonenumber: "test" },
        { phonenumber: "test" },
        { phonenumber: "test" },
        { phonenumber: "test" },
        { phonenumber: "test" },
        { phonenumber: "test" },
        { phonenumber: "test" },
        { phonenumber: "test" },
        { phonenumber: "test" },
      ],
    };
  },

  mounted() {
    // this.$refs.render.init(this.echartData);
  },

  methods: {
    //选择时间校验
    handleStartDateChange() {
      this.$nextTick(() => {
        // 更新endDatePickerOptions的disabledDate method
        this.endDatePickerOptions.disabledDate = (time) => {
          if (this.form.startTime) {
            return time.getTime() < new Date(this.form.startTime).getTime();
          } else {
            return false;
          }
        };
      });
    },
    handleEndDateChange() {
      this.$nextTick(() => {
        // 更新startDatePickerOptions的disabledDate method
        this.startDatePickerOptions.disabledDate = (time) => {
          if (this.form.endTime) {
            return time.getTime() > new Date(this.form.endTime).getTime();
          } else {
            return false;
          }
        };
      });
    },
    detailRow() {
      this.detailDialogVisible = true;
    },
    indexMethod(index) {
      return index + 1;
    },
  },
};
</script>

  <style lang="scss" scoped>
::v-deep .el-dialog {
  height: 78vh;
  overflow: auto;
}
::v-deep .el-dialog__wrapper {
  margin-top: 0 !important;
}
::v-deep .el-dialog__header {
  background: #1890ff;
}
::v-deep .el-dialog__wrapper {
  margin-top: 15vh;
}

::v-deep .el-dialog__title {
  color: #ffffff;
}

::v-deep .el-dialog__headerbtn .el-dialog__close {
  color: #ffffff;
}
.tableStyle {
  background-color: transparent !important;

  ::v-deep .el-table,
  ::v-deep tr,
  ::v-deep td {
    // background-color: transparent !important;
    // color: #ffffff;
    cursor: pointer;
    text-align: center;
  }
  ::v-deep th {
    color: #fff;
    background-color: #3e8ef7 !important;
    cursor: pointer;
    text-align: center;
  }
  ::v-deep .el-table__body tr.current-row > td {
    background-color: #409eff;
    // color: #00eaff;
  }
}
.tip {
  padding: 8px 16px;
  border-left: 5px solid #409eff;
  margin: 5px 0 10px 0;
}

.content {
  width: 100%;
  height: calc(100vh - 85px);
  padding: 10px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  .leftBox {
    width: 50%;
    height: 100%;
    // border: 1px solid red;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  }
  .rightBox {
    width: 49%;
    height: 100%;
    // border: 1px solid green;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .topBox {
      width: 100%;
      height: 15%;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
      // border: 1px solid green;
    }
    .centerBox {
      width: 100%;
      height: 50%;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
      // border: 1px solid green;
      .head-container {
        padding-left: 5px;
        .top {
          margin-bottom: 5px;
        }
        .center {
          .treeBox {
            overflow-y: auto;
            max-height: 300px; /* 设置最大高度 */
          }
          .stateBox {
          }
        }
      }
    }
    .bottomBox {
      width: 100%;
      // height: 34%;
      height: 49%;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
      // border: 1px solid green;
    }
  }
}
</style>